import '../ui/layui.all'
import '../ui/css/layui.css'
import '../ui/css/modules/code.css'
import '../ui/css/modules/layer/default/layer.css'
import '../ui/css/modules/laydate/default/laydate.css'
import './toolbar.css'
import * as Cesium from 'cesium'
import {initlayerManage,initDrawWorker} from '../inistallwidget'
const ToolBar = function(views){
    this.views = views
    var self = this
    this.data = null
    this.guids={
        domId:this.guid(),
        coordinatesId:this.guid()
    }
    this.temp = '<div class="cesium-widget-toolbar">'+
    '<ul class="tools-group">'+
        '<li title="初始范围"><i class="layui-icon layer-btn layui-icon-home" data-method="gohome"></i></li>'+
        '<li title="图层管理"><i class="layui-icon layer-btn layui-icon-template-1" data-method="openlayermanage"></i></li>'+
        '<li title="绘图工具"><i class="layui-icon layer-btn layui-icon-theme" data-method="opendraw"></i></li>'+
        '<li title="测量工具"><i class="layui-icon layer-btn layui-icon-edit" data-method="openmeasuer"></i></li>'+
        '<li title="系统工具"><i class="layui-icon layer-btn layui-icon-set-fill" data-method="close"></i></li>'+
    '</ul>'+
    '</div>'
    this.contanner = this._drawWidget()
    this.initcoordinatesInfo()
    //图层管理控件
    this.laymanager = initlayerManage(this.views) 
    this.drawworker = initDrawWorker(this.views)
}
ToolBar.prototype={
    initcoordinatesInfo:function(){
        var self = this
        var viewer = this.views
        var handler3D = new Cesium.ScreenSpaceEventHandler(
            viewer.scene.canvas);
        handler3D.setInputAction(function(movement) {
            var pick= new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);
            if(pick){
                var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);
                if(cartesian){
                    //世界坐标转地理坐标（弧度）
                    var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                    if(cartographic){
                        //海拔
                        var height = viewer.scene.globe.getHeight(cartographic);
                        //视角海拔高度
                        var he = Math.sqrt(viewer.scene.camera.positionWC.x * viewer.scene.camera.positionWC.x + viewer.scene.camera.positionWC.y * viewer.scene.camera.positionWC.y + viewer.scene.camera.positionWC.z * viewer.scene.camera.positionWC.z);
                        var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                        //地理坐标（弧度）转经纬度坐标
                        var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                        if(!height){
                            height = 0;
                        }
                        if(!he){
                            he = 0;
                        }
                        if(!he2){
                            he2 = 0;
                        }
                        if(!point){
                            point = [0,0];
                        }
                        self.coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>"+"视角海拔高度:"+(he - he2).toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;海拔:"+height.toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;经度：" + point[0].toFixed(6) + "&nbsp;&nbsp;纬度：" + point[1].toFixed(6)+ "</span>";
                    }
                }
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    openWidget:function(){
        this.contanner.style.display = "block"
    },
    closeWidget:function(){
        this.contanner.style.display = "none"
    },
    guid:function() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    },
    _drawWidget:function(){
        var dom =  document.createElement("div");
        dom.className = "ToolBar cesium-widget";
        dom.id= this.guids.domId
        dom.innerHTML = this.temp;
        this.coordinatesDiv = document.createElement("div");
        this.coordinatesDiv.id = this.guids.coordinatesId
        this.coordinatesDiv.className = "map3D-coordinates";
        this.coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;color:#edffff;'>暂无坐标信息</span>";
        // var body = document.getElementsByTagName("body")[0];
        // body.appendChild(dom);
        var ViewDom = this.views.container
        ViewDom.appendChild(dom);
        ViewDom.appendChild(this.coordinatesDiv);
        this._bind()
        return dom
    },
    _bind:function(){
        var self = this
        var active = {
            openlayermanage:function(){
                self.laymanager.openWidget()
            },
            opendraw:function(){
                self.drawworker.openWidget()
            }
        }
        $(`#${this.guids.domId} .layer-btn`).on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    }
}
export default ToolBar